<!DOCTYPE HTML>
<HTML>
	<HEAD>
		<META HTTP-EQUIV="CACHE-CONTROL" CONTENT="NO-CACHE" />
		<META HTTP-EQUIV="PRAGMA" CONTENT="NO-CACHE" />
		<META HTTP-EQUIV="EXPIRES" CONTENT="0" />
		<META HTTP-EQUIV="CONTENT-TYPE" CONTENT="text/html; charset=UTF-8" />
		<META HTTP-EQUIV="CONTENT-LANGUAGE" CONTENT="en,de" />
		<META NAME="ROBOTS" CONTENT="INDEX,NOFOLLOW" />
		<META NAME="AUTHOR" CONTENT="Andreas Kasch" />
		<META NAME="COPYRIGHT" CONTENT="&copy; 2013 Andreas Kasch" />
		<META NAME="DESCRIPTION" CONTENT="HTML5 Rendering Methods Evaluation" />
		<META NAME="KEYWORDS" CONTENT="HTML5, Rendering" />
		
		<TITLE>HTML5 Rendering Methods Evaluation - SVG Rendering</TITLE>
		
		<SCRIPT TYPE="text/javascript" CHARSET="utf-8" SRC="jquery-1.9.1.min.js"></SCRIPT>
		<SCRIPT TYPE="text/javascript" CHARSET="utf-8" SRC="jquery.svg.min.js"></SCRIPT>
		<SCRIPT TYPE="text/javascript" CHARSET="utf-8" SRC="timer.js"></SCRIPT>
		<SCRIPT TYPE="text/javascript" CHARSET="utf-8" SRC="model.js"></SCRIPT>
		<STYLE TYPE="text/css">
			#area{
				width: 1250px;
				height: 800px;
				margin: 10px;
				padding: 0;
				box-shadow: 0 0 9px 1px #000;
			}
		</STYLE>
	</HEAD>
	<BODY>
		<h1>SVG Rendering</h1>
		<p>
			<input type="button" value="1 Entit&auml;t" onclick="start(1,1)"/>
			<input type="button" value="100 Entit&auml;ten" onclick="start(10,10)"/>
			<input type="button" value="1250 Entit&auml;ten" onclick="start(50,25)"/>
			<span id="debug"></span>
		</p>
		<div id="area">
		
		</div>
		<p><a href="index.html">Zur&uuml;ck</a></p>
		<script type="text/javascript">
			var start = function(x, y){
				var m = new Model(x, y);
				
				var svg;
				var ent;
				
				var setup = function(cb){
					$("#area").svg('destroy');
					$("#area").html("");
					ent = [];
					$("#area").svg({onLoad: function(ctx){
						svg = ctx;
						for(var i in m){
							var src = m[i].frames[m[i].current];
							var e = svg.image(m[i].x, m[i].y, 25, 32, src);
							ent.push(e);
						}
						console.log(svg);
						cb();
					}});
				};
				
				var draw = function(cb){
					for(var i in m){
						m[i].current = (m[i].current+1)%m[i].frames.length;
						var src = m[i].frames[m[i].current];
						svg.change(ent[i], {href: src});
					}
					setTimeout(cb,1);
				};
				
				var done = function(time, fps){
					$("#debug").html("Zeit: " + time/1000. + " Sekunden, FPS: " + fps);
				};
				
				var t = new Timer(setup, draw, done);
				
				t.run();
			};
		</script>
	</BODY>
</HTML>